<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layerDemo1</title>
</head>
<body>
<p class="layer_notice">111</p>
<button id="test2">自定义弹出层</button><br/>
<button id="parentIframe">iframe父子操作</button><br/>
<button id="test4">询问框</button><br/>
<button id="test5">提示层</button><br/>
<button id="test6">风格</button><br/>
<button id="test7">捕捉页</button><br/>
<button id="test8">页面层</button><br/>
<button id="test9">自定义页</button><br/>
<button id="layer1">layer1</button><button id="layer2">layer2</button><button id="layer3">layer3</button><br/>
<button id="layer4">layer4</button><button id="layer5">layer5</button><button id="layer6">layer6</button><br/>
<button id="layer7">layer7</button><button id="layer2">layer2</button><button id="layer3">layer3</button>
你必须先引入jQuery1.8或以上版本
<script src="../js/jquery-1.8.3.js"></script>
<script src="../layer/layer.js"></script>
<script type="text/javascript">
//弹出一个页面层
$('#test2').on('click', function(){
	layer.alert('内容')
});
//弹出一个iframe层
$('#parentIframe').on('click', function(){
	layer.alert('内容', {
		  icon: 1,
		  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
		})

});
//
$('#test4').on('click', function(){
	//询问框
	layer.confirm('您是如何看待前端开发？', {
	  btn: ['重要','奇葩'] //按钮
	}, function(){
	  layer.msg('的确很重要', {icon: 1});
	}, function(){
	  layer.msg('也可以这样', {
	    time: 20000, //20s后自动关闭
	    btn: ['明白了', '知道了']
	  });
	});
});

$('#test5').on('click', function(){
	//提示层
	layer.msg('玩命提示中');

});
//墨绿深蓝风
$("#test6").on("click",function(){
	//墨绿深蓝风
	layer.alert('墨绿风格，点击确认看深蓝', {
	  skin: 'layui-layer-molv' //样式类名
	  ,closeBtn: 0
	}, function(){
	  layer.alert('偶吧深蓝style', {
	    skin: 'layui-layer-lan'
	    ,closeBtn: 0
	    ,anim: 4 //动画类型
	  });
	});	
})
//捕捉页
$("#test7").on("click",function(){
	layer.open({
		  type: 1,
		  shade: false,
		  title: false, //不显示标题
		  content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
		  cancel: function(){
		    layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
		  }
		});
})
$("#test8").on("click",function(){
	//页面层
	layer.open({
	  type: 1,
	  skin: 'layui-layer-rim', //加上边框
	  area: ['420px', '240px'], //宽高
	  content: 'html内容'
	});
})
$("#test9").on("click",function(){
	//自定页
	layer.open({
	  type: 1,
	  skin: 'layui-layer-demo', //样式类名
	  closeBtn: 0, //不显示关闭按钮
	  anim: 2,
	  shadeClose: true, //开启遮罩关闭
	  content: '内容'
	});
})
$("#layer1").on("click",function(){
	//tips层
	layer.tips('Hi，我是tips', 'layer_notice');
	//iframe层
	layer.open({
	  type: 2,
	  title: 'layer mobile页',
	  shadeClose: true,
	  shade: 0.8,
	  area: ['380px', '90%'],
	  content: 'login' //iframe的url
	}); 	
})

$("#layer2").on("click",function(){
	//iframe窗
	layer.open({
	  type: 2,
	  title: false,
	  closeBtn: 0, //不显示关闭按钮
	  shade: [0],
	  area: ['340px', '215px'],
	  offset: 'rb', //右下角弹出
	  time: 2000, //2秒后自动关闭
	  anim: 2,
	  content: ['layerDemo2.jsp', 'no'], //iframe的url，no代表不显示滚动条
	  end: function(){ //此处用于演示
	    layer.open({
	      type: 2,
	      title: '很多时候，我们想最大化看，比如像这个页面。',
	      shadeClose: true,
	      shade: false,
	      maxmin: true, //开启最大化最小化按钮
	      area: ['893px', '600px'],
	      content: '//fly.layui.com/'
	    });
	  }
	});
})

$("#layer3").on("click",function(){
	//加载层
	var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
	//loading层
	var index = layer.load(1, {
	  shade: [0.1,'#fff'] //0.1透明度的白色背景
	});
})

$("#layer4").on("click",function(){
	//小tips
	layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
	  tips: [1, '#3595CC'],
	  time: 4000
	});
})

$("#layer5").on("click",function(){
	//prompt层
	layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
	  layer.close(index);
	  layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
	    layer.close(index);
	    layer.msg('演示完毕！您的口令：'+ pass +'您最后写下了：'+text);
	  });
	});
})

  $("#layer6").on("click",function(){
	//tab层
	  layer.tab({
	    area: ['600px', '300px'],
	    tab: [{
	      title: 'TAB1', 
	      content: '内容1'
	    }, {
	      title: 'TAB2', 
	      content: '内容2'
	    }, {
	      title: 'TAB3', 
	      content: '内容3'
	    }]
	  });	
  })

$("#layer7").on("click",function(){
	//相册层
	$.getJSON('test/photos.json?v='+new Date, function(json){
	  layer.photos({
	    photos: json //格式见API文档手册页
	    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
	  });
	});
})

  
</script>
</body>
</html>